<template>
  <left-fixed-right-list>
    <!--左边部分-->
    <template v-slot:left>
      <div class="article-sidebar">
        <!--日历组件-->
        <div class="light-grey-bottom calendar-box">
          <MyCalendar/>
        </div>
        <!--文章元数据-->
        <div class="article-meta-sidebar light-grey-bottom">
          <div class="article-sidebar-item">
            <span><View class="little-icon"/></span>
            <span>{{ state.article.view }}</span>
          </div>
          <div class="article-sidebar-item">
            <span><icon-font icon-name="icon-dianzan" class="little-icon"/></span>
            <span>{{ state.article.like }}</span>
          </div>
          <div class="article-sidebar-item">
            <span><a href="#comment"><icon-font icon-name="icon-caozuo-pinglun" class="little-icon"/></a></span>
            <span>{{ state.article.comment }}</span>
          </div>
        </div>
      </div>
    </template>
    <template v-slot:right>
      <!--文章部分-->
      <article-head v-if="state.article.id" :article-info="state.article" class="article-head"/>
      <div class="light-grey-bottom view-bar">
        <md-editor
            preview-only
            preview-theme="vuepress"
            v-model="state.article.content"
            class="article-content"/>
      </div>
      <div id="comment"/>
      <!--评论操作-->
      <div class="comment-editor light-grey-bottom">
        <div class="comment-area">
          <el-input
              show-word-limit
              maxlength="300"
              v-model="state.comment"
              :rows="4"
              resize="none"
              type="textarea"
              placeholder="输入评论..."
          />
        </div>
        <div class="publish-comment">
          <el-button type="primary">发表评论</el-button>
        </div>
      </div>
      <div>
        <article-comment article-id="114514"/>
      </div>
    </template>
  </left-fixed-right-list>
</template>

<script setup lang="ts">
import LeftFixedRightList from "@/components/common/LeftFixedRightList.vue";
import MdEditor from "md-editor-v3";
import "md-editor-v3/lib/style.css";
import {provide, reactive} from "vue";
import ArticleHead from "@/components/article/articleHead.vue";
import {ArticleInfo} from "@/entity/article/article";
import MyCalendar from "@/components/plugins/MyCalendar.vue";
import IconFont from "@/components/common/IconFont.vue";
import ArticleComment from "@/components/comment/ArticleComment.vue";
import router from "@/router";
import {GetArticleInfo} from "@/service/article";
import {BusinessCode} from "@/lang/Common";

interface ViewState {
  article: ArticleInfo;
  comment: string;
}

const state = reactive<ViewState>({
  article: reactive({}),
  comment: ""
});
const article = () => {
  GetArticleInfo(router.currentRoute.value.params.id as string).then(res => {
    if (res?.data?.code == BusinessCode.Ok) {
      state.article = reactive(res.data.data);
    }
  });
};
article();
provide("article", state.comment);

</script>

<style scoped>
@media screen and (max-width: 1100px) {

}

.calendar-box {
  padding: 5px;
  background: white;
  margin-bottom: 15px;
}

.article-meta-sidebar {
  padding: 5px 20px;
  background: white;
}

.article-sidebar {
  font-size: 16px;
  font-weight: 500;
}

.article-sidebar-item {
  display: flex;
  margin: 7px 65px;
  justify-content: space-between;
}

.article-head {
  margin-bottom: 3px;
}

.article-content {
  text-align: left;
  padding: 5px 25px;
}

.little-icon {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.little-icon:hover {
  color: #72afd3;
}

.view-bar {
  margin-bottom: 15px;
}

.comment-editor {
  background: white;
  padding: 15px 8px 8px 8px;
  margin-bottom: 15px;
}

.comment-area {
  margin-bottom: 10px;
}

.publish-comment {
  display: flex;
  justify-content: right;
}
</style>